<!--
 * @Author: wangding
 * @Date: 2020-10-22 17:14:47
 * @LastEditTime: 2021-01-26 16:19:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\role\add.vue
-->
<template>
    <div>
        <el-dialog
                :title="$t('add')"
            :visible="menuVisible"
            width="600px"
            @close="()=>{$store.commit('setMenuVisible',false)}">
            <el-form ref="form" :model="form" label-width="120px" >
                <el-row :gutter="20">
                    <el-col :span="16" :offset="4">
                        <el-form-item :label="$t('menu.menuName')" prop="menuName" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.menuName" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="4">
                        <el-form-item :label="$t('menu.menuURL')" prop="menuURL" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.menuURL" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="4">
                        <el-form-item :label="$t('menu.menuImage')" prop="menuImage" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.menuImage" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="4">
                        <el-form-item :label="$t('menu.sort')" prop="sort" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.sort" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="4">
                        <el-form-item :label="$t('menu.pName')" prop="pid" :rules="[{ required: true, message: $t('index_js_notNull')}]" >
                            <el-cascader
                            v-model="form.pid"
                            :options="allMenusList"
                            :props="{ expandTrigger: 'click',label:'menuName',value:'sid',checkStrictly: true}"
                            @change="handleChange" ref='newTopRightsTree'>
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setMenuVisible',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('sure')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        allMenusList:{
            type:Array,
            default:() => {return []}
        },
    },
    data() {
        return {
            form:{
                menuName:'',
                menuURL:'',
                menuImage:'',
                sort:'',
                pid:''
            }
        };
    },
    computed: {
        menuVisible(){
            return this.$store.state.sysStore.menuVisible
        }
    },
    watch: {
        allMenusList:{
            handler(nv,ov){
                if(nv){
                    // let obj = {
                    //     id:'0',
                    //     sid:'0',
                    //     menuName:'菜单'
                    // }
                    // nv.unshift(obj)
                }
            }
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        async menuAddEntity(){
            let node = this.$refs.newTopRightsTree.getCheckedNodes()[0].data
            console.log(node,'node');
            let obj = {
                pName:node.menuName,
                menuLevel:node.menuLevel+1,
                isLeaf:1
            }
            let res = await this.API.menuAddEntity(Object.assign({},this.form,obj))
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.$store.commit('setMenuVisible',false)
                this.$emit('uploadData',true)
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
            },
                
        handleChange(value){
            console.log(this.$refs.newTopRightsTree.getCheckedNodes(),'value');
            
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.menuAddEntity()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        async roleAddEntity(){
            let res = await this.API.roleAddEntity(Object.assign({},this.form,{enableFlag: 1,deleteFlag: 0}))
            this.$store.commit('setMenuVisible',false)
            this.$emit('uploadPage',true)
        }
    },
};
</script>

<style  lang="less">
    .el-dialog__body{
        // display: inline-block;
        // margin: 0 auto;
    }
</style>
